<template>
    <view class="luck-draw-turntable-main">
        <view class="luck-container" :style="{ background: bgLuckUrl }">
            <!-- 开始 -->
            <view class="turntable-btn-wrap" @click="handlerActivityTurntableDraw">
                <view>
                    <image class="arrow-img" :src="getImgOssUrl('/ui-prod-2.5.0/luck-turntable-btn2.png')"></image>
                    <view class="turntable-btn" :style="{ background: luckBtn }">
                        <view class="luck-btn">抽奖</view>
                        <view v-if="props.drawStatus === 0" class="luck-status">未开始</view>
                        <view v-else-if="props.drawStatus === 2" class="luck-status">已结束</view>
                        <view v-else class="luck-status"
                            >{{ props.isLogin ? '剩余' : '每天'
                            }}{{
                                props.isLogin ? props.drawNum : props.activityInfo.luckDrawConfig.everyDayNum
                            }}次</view
                        >
                    </view>
                </view>
            </view>
            <view
                class="luck-item-container-bg"
                :style="{ background: bgLuckConUrl, transform: 'rotate(' + Data.wheelDeg + 'deg)' }">
                <view v-for="(item, index) in props.activityInfo.luckDrawTurntable" :key="index" class="luck-item">
                    <view
                        class="turntable-item-wrap"
                        :style="{
                            transform:
                                'rotate(' + ((360 / props.activityInfo.luckDrawTurntable.length) * index + 22) + 'deg)'
                        }">
                        <view class="setup-title">
                            <view class="name">{{ item.awardName }}</view>
                            <image
                                :src="
                                    item.awardImg && item.awardImg !== 'default'
                                        ? item.awardImg
                                        : getImgOssUrl('/ui-prod-2.4.0/pop-up-smile.png')
                                "
                                class="prize-img" />
                        </view>
                    </view>
                </view>
            </view>
            <swiper v-if="props.hornData.length" circular autoplay :interval="2000" vertical class="horn">
                <swiper-item v-for="(item, index) in props.hornData" :key="index" class="horn-item">
                    <view
                        >用户{{ item.mobile
                        }}{{ item.awardStauts === 1 ? '参与了抽奖' : '抽中了' + item.awardName }}</view
                    >
                </swiper-item>
            </swiper>
            <view v-else class="horn">超多奖品等您来抽</view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { debounce } from 'lodash';
import { getImgOssUrl, timeDiff } from '@/commons/utils';

const emit = defineEmits(['startLuck', 'endLuck']);

const props = defineProps({
    // 是否登陆
    isLogin: {
        type: Boolean,
        default: false
    },
    // 剩余抽奖次数
    drawNum: {
        type: [Number, String],
        default: 0
    },
    // 抽奖状态
    drawStatus: {
        type: [Number, String],
        default: 0
    },
    // 活动信息
    activityInfo: {
        type: Object,
        default: () => {
            return {};
        }
    },
    hornData: {
        type: Array,
        default: () => {
            return [];
        }
    }
});

const bgLuckUrl = ref(`url(${getImgOssUrl('/ui-prod-2.5.0/luck-turntable-bg.png')})`);
const bgLuckConUrl = ref(`url(${getImgOssUrl('/ui-prod-2.5.0/luck-turntable-con-bg.png')})`);
const luckBtn = ref(`url(${getImgOssUrl('/ui-prod-2.5.0/luck-turntable-btn.png')})`);

const isLogin = ref(false);
const Data = reactive({
    amplification_index: 0, //轮盘的当前滚动位置
    roll_flag: true, //是否允许滚动
    max_number: 8, //轮盘的全部数量
    speed: 300, //速度，速度值越大，则越慢 初始化为300
    myInterval: '', //定时器
    max_speed: 40, //滚盘的最大速度
    minturns: 8, //最小的圈数为2
    runs_now: 0, //当前已跑步数
    luck_num: 0, // 中奖位置！！！！！！！！！！！！！！！！！！！！！！！！！
    end_amp: 0, //上一次滚动的位置
    start_flag: true,
    freeNumber: 0,
    activityInfo: {}, // 活动信息
    hornData: [], // 顶部喇叭信息
    winPrizeMes: {}, // 中奖信息信息
    isWinning: true, // 是否中奖
    drawNum: 0, // 抽奖剩余次数
    drawDayNum: 0, // 邀请好友获得次数
    drawStatus: 0, // 抽奖状态：0 未开始 1 进行中 2 已结束
    hasLuckNum: false,
    hasRealPrize: false,
    wheelDeg: 0
});

const rotateIng = () => {
    let wheelDeg = Data.wheelDeg;
    Data.wheelDeg = wheelDeg - (wheelDeg % 360) + 5 * 360 + (360 - (360 / 8) * Data.luck_num) + 22;
    let timer = setTimeout(() => {
        clearTimeout(timer);
        Data.roll_flag = true;
        emit('endLuck');
    }, 4100);
};

const handlerActivityTurntableDraw = debounce(async () => {
    emit('startLuck');
}, 400);

const startRolling = index => {
    Data.luck_num = index + 1;
    //当前可以点击的状态下
    if (Data.roll_flag) {
        Data.roll_flag = false;
        //启动滚盘，
        rotateIng();
    }
};

onMounted(() => {});

onShow(() => {});

defineExpose({
    startRolling
});
</script>
<style lang="scss" scoped src="./turntable.scss"></style>
